<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>未来头条-注册</title>
    <link rel="icon" href="../static/img/default_avatar/2e6ced4da4ff5a32c7f1866bff276450.png"
        th:href="@{/img/default_avatar/2e6ced4da4ff5a32c7f1866bff276450.png}" type="image/png">

    <link rel="stylesheet" href="../static/css/login/login.css" th:href="@{/css/login/login.css}">
    <link rel="stylesheet" href="../static/iconFont/iconfont.css" th:href="@{/iconFont/iconfont.css}">
</head>

<body>
    <span class="alert" th:if="${message}" th:text="${message}" id="alertMessage" style="color: red;"></span>
    <span class="alerts" style="display: none;color:red"></span>

    <div class="mainPage-nav">
        <div class="nav-con">
            <div class="nav-left">
                <span class="nav-lef-wei">未来</span>
                <span class="nav-lef-text">头条</span>
            </div>
            <div class="nav-right">首页</div>
        </div>
        <div class="nav-clear"></div>
    </div>
    <div class="container">
        <div class="center">
            <div class="container-left">
                <div class="illustrations">
                    <img src="/img/892b89bb36d439c2b58ac1e291046721.png" alt="登录图片">
                </div>
            </div>
            <div class="container-right">
                <form class="register-container" th:action="@{/user/register}" th:method="post">
                    <h2 id="register-title">邮箱注册</h2>
                    <label for="Sign-account"></label>
                    <div class="input-group">
                        <div class="error-message" id="sign-accountError">
                            <i class="iconfont icon-xiaochahao"></i>
                            <span class="Sign-error-text">邮箱格式不正确</span>
                        </div>
                        <div class="write-username">
                            <span><i class="iconfont icon-zhanghutouxiang"></i></span>
                            <input type="text" placeholder="邮箱" id="Sign-account" th:value="${email}" name="email">
                        </div>
                    </div>
                    <label for="register-code"></label>
                    <div class="input-group">
                        <div class="error-message" id="Sign-codeError">
                            <i class="iconfont icon-xiaochahao"></i>
                            <span class="Sign-error-text">请输入验证码</span>
                        </div>
                        <div class="write-code">
                            <input type="text" placeholder="验证码" id="register-code" th:value="${code}" name="code">
                            <!-- 这里只有设置为button,才能使用disable属性,用于启动或禁用按钮 -->
                            <button id="getCode" type="button">
                                点击发送验证码
                            </button>
                        </div>
                    </div>
                    <label for="Sign-password"></label>
                    <div class="input-group">
                        <div class="error-message" id="sign-passwordError">
                            <i class="iconfont icon-xiaochahao"></i>
                            <span class="Sign-error-text">密码长度需在6-64位,需包含数字,字母大小写,字符</span>
                        </div>
                        <div class="write-newpassword">
                            <input type="password" placeholder="设置新密码" id="Sign-password" name="password">
                            <span class="Eyeclose"><i class="iconfont icon-eye-close"></i></span>
                            <span class="Eyeopen"><i class="iconfont icon-eye_open"></i></span>
                        </div>
                    </div>
                    <div class="checkbox">
                        <input type="checkbox" id="terms">
                        <label for="terms">我已阅读并同意《用户协议》和《隐私政策》</label>
                    </div>
                    <div id="login">
                        <span id="login-text">已有账号?点击登录</span>
                    </div>
                    <input type="submit" class="sign-up-btn" value="点击注册">
                </form>

            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="../static/js/register.js" th:src="@{/js/register.js}"></script>
</body>

</html>